<template>
  <el-dialog :title="title" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <el-form :model="sizeForm" :ref="sizeForm" label-width="100px" size="small" :disabled="(sizeForm.id && isEditMode==false)?true: false">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="模板名称" required>
            <el-input size="small" v-model.trim="sizeForm.title" placeholder="请输入模板名称" maxlength="20" show-word-limit @input="watchInput"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="尺寸数据" required>
            <el-checkbox-group v-model.trim="sizeForm.selectionSize">
              <el-checkbox v-for="(item, index) in typeDataList" :label="index" :key="item.sizeName">{{ item.sizeName }} </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="备注">
            <el-input type="textarea" size="small" v-model.trim="sizeForm.remark" placeholder="请输入备注" :rows="4" maxlength="50" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelModel()">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="closeModel()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { AddSizeModules, UpdateSizeModules } from '@/views/store-management/services/index'
export default {
  props: ['visible', 'title', 'size','isEditMode'],
  data() {
    return {
      sizeForm: {
        id: '',
        status: 1,
        title: '',
        remark: '',
        selectionSize: [],
        // limit: [{ id: '', startNum: 0, endNum: 0 }]
      },
      submitLoading: false,
      typeDataList: [
        { sizeName: '领围', fieldName: 'collarOpening' },
        { sizeName: '胸围', fieldName: 'chestWidth' },
        { sizeName: '腰围', fieldName: 'waist' },
        { sizeName: '臀围', fieldName: 'hipWidth' },
        { sizeName: '裤长', fieldName: 'inseam' },
        { sizeName: '肩宽', fieldName: 'crossShoulder' },
        { sizeName: '袖长', fieldName: 'sleeveLength' },
        { sizeName: '衣长', fieldName: 'bodyLength' },
        { sizeName: '裙长', fieldName: 'outseam' },
      ],
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (newValue === true && this.size) {
          this.renderItem(this.size)
        }
      },
    },
  },

  methods: {
    watchInput(event) {
      this.sizeForm.title = this.inputReplaceSpecialChar(event)
    },
    //对价格模板进行渲染
    renderItem(item) {
      this.sizeForm.title = item.title
      this.sizeForm.id = item.id
      this.sizeForm.status = item.status
      this.sizeForm.remark = item.remark
      this.sizeForm.selectionSize = eval(item.selectionSize).map(item => this.typeDataList.findIndex(child => child.fieldName == item.fieldName))
    },
    clearForm() {
      this.sizeForm.title = ''
      this.sizeForm.id = ''
      this.sizeForm.status = 1
      this.sizeForm.remark = ''
      this.sizeForm.selectionSize = []
    },
    //触发取消按钮
    cancelModel() {
      // this.sizeForm.title = ''
      // this.sizeForm.selectionSize = []
      // this.sizeForm.remark = ''
      this.clearForm()
      this.$emit('update:visible', false)
    },
    closeModel() {
      if (!this.sizeForm.title) {
        this.$message.warning('请输入模板名称!')
        return
      }
      if (!this.sizeForm.selectionSize || !this.sizeForm.selectionSize.length) {
        this.$message.warning('请至少选择一项尺寸数据!')
        return
      }
      this.submitLoading = true
      if(this.sizeForm.id) {
      if (this.isEditMode) {
        this.edit()
      } else {
        this.submitLoading = false
        this.$emit('update:visible', false)
        this.clearForm()
          // this.$emit('update')
       }
      }else {
        this.add()
      }
    },
    add() {
      AddSizeModules({
        title: this.sizeForm.title,
        selectionSize: JSON.stringify(this.sizeForm.selectionSize.map(item => this.typeDataList[Number(item)])),
        status: this.sizeForm.status,
        remark: this.sizeForm.remark
      }).finally(() => (this.submitLoading = false))
      .then(res =>{
          if(res.code == 200) {
              this.$message.success("新增成功！")
          }else {
              this.$message.error("新增失败！")
          }
          this.$emit('update:visible', false)
          this.clearForm()
          this.$emit('update')
      })
    },
    edit() {
      UpdateSizeModules({
        id: this.sizeForm.id,
        title: this.sizeForm.title,
        selectionSize: JSON.stringify(this.sizeForm.selectionSize.map(item => this.typeDataList[Number(item)])),
        status: this.sizeForm.status,
        remark: this.sizeForm.remark
      })
        .finally(() => (this.submitLoading = false))
        .then(data => {
          if (data.code == 200) {
            this.$message.success('操作成功!')
          } else {
            this.$message.error('操作失败!')
          }
          this.$emit('update:visible', false)
          this.clearForm()
          this.$emit('update')
        })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
  width: 30%;
  margin-right: 0px;
}
</style>
